<template>
  <view>
    <view class="notice-box" :style="'background-color: '+bgColor+';'">
      <view class="notice-icon">
        <!-- <uni-icons
          :color="color"
          type="sound"
          size="14"></uni-icons> -->
      </view>
      <scroll-view class="notice-content">
        <swiper class="swiper" :autoplay="true" :interval="switchTime*1000" :duration="1500" :circular="true" :vertical="true">
          <swiper-item v-for="(t, index) in list" :key="index" class="notice-content-item">
            <view class="swiper-item">
              <text class="notice-content-item-text" :style="'color: '+color+';'">
                {{t}}
              </text>
            </view>
          </swiper-item>
        </swiper>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  export default {
    props:{
      list: {
        type: Array,
        default: ['暂无未读消息']
      }, 
      color: {
        type: String,
        default: '#fffff'
      },
      bgColor: {
        type: String,
        default: 'rgba(0,0,0,0.5)'
      },
      switchTime: {
        type: Number,
        default: 3
      },
    }
  }
</script>

<style>
  .swiper{
    height: 60upx!important;
  }
  .notice-box{
    width: 40%; 
	height: 60rpx;
    /* height: 60upx; */
    padding: 0 10upx; 
    overflow: hidden; 
    margin: 20upx 0; 
    display: flex; 
    justify-content: flex-start;
	border-radius: 50rpx;
  }

  .notice-content{
    /* width: calc(100% - 220upx); */
    position: relative; 
    font-size: 14px;
	color:white;
  }
  .notice-content-item{
    /* width: 100%; */
    height: 60rpx;
    text-align: left; 
    line-height: 60rpx;
  }
/*  .notice-content-item-text{
    display: block; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    overflow: hidden;
  } */
  
  @keyframes anotice {
     0%  {transform: translateY(100%);}
      30%  {transform: translateY(0);}
      70%  {transform: translateY(0);}
     100%  {transform: translateY(-100%);}
  }
</style>
